<template>
  <div class="app">
    <!-- <transition> -->
    <keep-alive>
      <router-view v-if="isRouterAlive"></router-view>
    </keep-alive>
    <!-- </transition> -->
    <van-tabbar
      v-model="$store.state.activeinfo"
      active-color="#07c160"
      inactive-color="#000"
      fixed
    >
    <!-- 求职者模块界面图 -->
      <div class="niuren" v-show="niuren">
        <van-tabbar-item icon="bag-o" to="/position/worklist">职位</van-tabbar-item>
        <van-tabbar-item icon="newspaper-o" to="/company">公司</van-tabbar-item>
        <van-tabbar-item icon="more-o" info="5" to="/new">消息</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/myhome">我的</van-tabbar-item>
      </div>
      <div class="boss" v-show="boss">
        <van-tabbar-item icon="user-o" to="/personnel">牛人</van-tabbar-item>
        <van-tabbar-item icon="more-o" info="5" to="/new">消息</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/bosshome">我的</van-tabbar-item>
      </div>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  data: () => ({
    isRouterAlive: true,
    boss: false,
    niuren: true,
    icon1: [
      // 牛人图标导航
      {
        icon: 'bag - o',
        to: '/position/worklist'
      },
      {
        icon: 'newspaper-o',
        to: '/company'
      },
      {
        icon: 'more-o',
        to: '/new'
      },
      {
        icon: 'friends-o',
        to: '/myhome'
      }
    ],
    icon2: [
      // boss图标导航
      {
        icon: 'user-o',
        to: '/personnel'
      },
      {
        icon: 'more-o',
        to: '/new'
      },
      {
        icon: 'friends-o',
        to: '/bosshome'
      }
    ]
  }),
  created () {
    this.pandua()
  },
  methods: {
    pandua () {
      // console.log(this.$route.path)  为/？不晓得为啥

      if (this.$route.path === '/') {
        // console.log('qqq')
        this.boss = !this.boss
        console.log(this.boss)

        this.niuren = !this.niuren
      } else {
        this.boss = false
        this.niuren = true
      }
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.app {
  overflow-x: hidden;
}
.van-icon-plus {
  margin-right: 5px;
}
.v-enter {
  transform: translateX(100%);
}
.v-leave-to {
  position: absolute;
  transform: translateX(-100%);
  left: -400%;
}
.v-enter-active,
.v-leave-active {
  transition: 0.6s;
}
.niuren {
  width: 100%;
  height: 50px;
  display: flex;
}
.boss {
  width: 100%;
  height: 50px;
  display: flex;
}
</style>
